<template>
  <div class="all">
    <div class="warp">
      <el-container class="main">
        <!-- 头部 -->
        <div class="ha">
          <el-header class="head">
            <i class="el-icon-back" @click="back"></i>
          </el-header>
        </div>
        <!-- 主体 -->
        <el-main class="main1">
          <!-- 上传照片区域 -->
          <el-upload
            style="position: relative; top: 10px; height: 120px"
            :file-list="fileList"
            class="avatar-uploader"
            :limit="1"
            :action="uploadUrl"
            accept="image/jpeg,image/gif,image/png,image/bmp"
            list-type="picture-card"
            :data="uploadData"
            :on-success="handleAvatarSuccess"
            :on-error="uploadError"
            :before-upload="beforeAvatarUpload"
            :on-preview="doLookImg"
            :on-remove="doDeleteImg"
          >
            <i class="el-icon-plus"></i>
          </el-upload>

          <!-- 相片展示区域 -->
          <div class="showpic" v-for="item in fileList" :key="item.pic_id">
            <img :src="item.pic_url" alt="" />
          </div>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script>
export default {
  created() {
    this.showthispic()
  },

  mounted() {
    getQiniuToken({}).then((res) => {
      console.log(res)
      if (res.code === "0") {
        this.uploadData.token = res.data.uploadToken
      }
    })
  },

  // 数据源
  data() {
    return {
      fileList: [
        {
          pic_id: "1",
          pic_name: "",
          pic_url:
            "https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&fmt=auto&app=138&f=JPEG?w=632&h=500",
          pic_album: "",
        },
        {
          pic_id: "2",
          pic_name: "",
          pic_url:
            "https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&fmt=auto&app=138&f=JPEG?w=632&h=500",
          pic_album: "",
        },
      ],
      // 保存当前的相册id
      album_id: this.$route.params.album_id,

      // 七牛
      uploadUrl: "http://up-z0.qiniu.com",
      uploadData: { key: "", token: "" },
      formAdd: { brandLogo: "" },
    }
  },
  // 方法区
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },

    // 进入指定相册展示其中的图片
    async showthispic() {
      console.log(this.$route.params.album_id)
      const { data: res } = await this.$http.get("album/selectalbumid", {
        params: { pic_album: this.album_id },
      })
      // 查看获取的数据
      console.log(res)
      // 将查询到的数据保存到data中
      this.fileList = res.data
      // 查看数组数据
      console.log(this.fileList)
    },

    // 点击回到相册
    back() {
      this.$router.push("/home/myalbum")
    },

    // 七牛
    doDeleteImg(file, fileList) {
      console.log("删除成功", file, fileList)
      let logoAry
      let key
      if (this.editState) {
        logoAry = this.mainInfo.brandLogo.split("/")
      } else {
        logoAry = this.formAdd.brandLogo.split("/")
      }
      key = logoAry[logoAry.length - 1]
      deleteQiniuImg({ key }).then((res) => {
        if (res.code === "0") {
          if (this.editState) {
            this.mainInfo.brandLogo = ""
          } else {
            this.formAdd.brandLogo = ""
          }
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    doLookImg() {
      this.uploadDialogVisible = true
      this.uploadDialogImg = this.editState
        ? this.mainInfo.brandLogo
        : this.formAdd.brandLogo
    },
    handleAvatarSuccess(res, file, fileList) {
      console.log("上传成功", res, file, fileList)
      let hash = res.hash
      let key = res.key
      if (this.editState) {
        this.mainInfo.brandLogo = qiniuConfig.qiniuPath + "/" + key
      } else {
        this.formAdd.brandLogo = qiniuConfig.qiniuPath + "/" + key
      }
    },
    beforeAvatarUpload(file) {
      console.log(file, "beforeAvatarUpload")
      // var observable = qiniu.upload(file, key, token, putExtra, config)
      const isPNG = file.type === "image/png"
      const isJPEG = file.type === "image/jpeg"
      const isJPG = file.type === "image/jpg"
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isPNG && !isJPEG && !isJPG) {
        this.$message.error("上传头像图片只能是 jpg、png、jpeg 格式!")
        return false
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!")
        return false
      }
      this.uploadData.key = `upload_pic_${new Date().getTime()}_${file.name}`
    },
    uploadError(err, file, fileList) {
      this.$message({
        message: "上传出错，请重试！",
        type: "error",
        center: true,
      })
    },
  },
}
</script>

<style lang="less" scoped>
.big {
  // display: inline-block;
  float: left;
  margin-top: 20px;
  margin-left: 10px;
  padding: 0 0 0 0;
}

.showpic {
  display: inline-block;
  margin-left: 15px;
  width: 200px;
  height: 200px;
  background-color: pink;

  img {
    width: 100%;
    height: 100%;
  }
}

.el-icon-back {
  color: white;
  font-size: 40px;
}

.all {
  width: 100%;
  height: 100%;
}

.warp {
  width: 100%;
  height: 100%;
}

.head {
  position: fixed;
  width: 100%;
  background-color: #373d41;
}

.main1 {
  padding: 60px 0 0 0;
}

.upload-demo {
  right: 10px;
}
</style>
